<template>
  <div class="">
    <el-form ref="sm4" :model="pluginData" label-width="150px">
      <el-form-item label="步骤名称" prop="name">
        <el-input v-model="pluginData.name"></el-input>
      </el-form-item>
      <el-form-item label="操作" prop="operationType">
        <el-select v-model="pluginData.operationType" style="width:100%">
          <el-option
            key="0"
            label="加密"
            value="0">
          </el-option>
          <el-option
              key="1"
              label="解密"
              value="1">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="秘钥设置" prop="secretKeyInField">
        <el-row>
          <el-checkbox v-model="pluginData.secretKeyInField" true-label="Y" false-label= "N">秘钥来自字段</el-checkbox>
          <el-select v-model="pluginData.secretKeyField" placeholder="请选择秘钥字段" :disabled="pluginData.secretKeyInField == 'N'" style="margin: 0 20px; width: 300px;" clearable filterable>
            <el-option
              v-for="item in fieldOptions"
              :key="item.name"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
          <el-checkbox v-if="false" v-model="pluginData.readKeyAsBinary" style="margin: 0 20px;" true-label="Y" false-label= "N" :disabled="pluginData.secretKeyInField == 'N'">以二进制读取</el-checkbox>
        </el-row>
      </el-form-item>
      <el-form-item label="秘钥" prop="secretKey">
        <el-input v-model="pluginData.secretKey" minlength="32" maxlength="32" :disabled="pluginData.secretKeyInField == 'Y'"></el-input>
      </el-form-item>

      <el-form-item label="输入字段" prop="inputField">
        <el-row>
          <el-select v-model="pluginData.inputField" placeholder="请选择" style="width: 300px;" clearable filterable>
            <el-option
              v-for="item in fieldOptions"
              :key="item.name"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
          <el-checkbox v-model="pluginData.inputAsHex" style="margin: 0 20px;" true-label="Y" false-label= "N">16进制字符串</el-checkbox>
        </el-row>
      </el-form-item>
      <el-form-item label="输出字段" prop="outputField">
        <el-input v-model="pluginData.outputField"></el-input>
      </el-form-item>
    </el-form>
    <div class="el-dialog__footer">
      <span class="dialog-footer">
         <el-button
           icon="el-icon-back"
           @click="cancel">取消
            </el-button>
            <el-button
              type="primary" icon="el-icon-check"
              @click="handleSaveData()">确定
           </el-button>
      </span>
    </div>
  </div>
</template>

<script>
  /* eslint-disable new-cap */
  import API from '../../../../../api/index'
  import mxgraph from '../../../../../graph/VueMxGraphLoader'
  import dictSelect from '../../../std/dict-select.vue'

  const {
    mxUtils,
    mxCodec
  } = mxgraph
  export default {
    name: 'sm4',
    props: {
      name: String
    },
    components: {
      dictSelect
    },
    data () {
      return {
        graph: null,
        pluginData: {
          name: '',
          secretKeyInField: 'N',
          operationType: '0', // 操作类型 加密0 / 解密 1
          secretKey: '', // 密钥
          inputField: '',
          outputField: '',
          secretKeyField: '',
          readKeyAsBinary: 'N',
          inputAsHex: 'Y', // 16进制格式
          outputAsHex: 'Y' // 16进制格式
        },
        temp: {
          name: '',
          secretKeyInField: 'N',
          operationType: '0', // 操作类型 加密0 / 解密 1
          secretKey: '', // 密钥
          inputField: '',
          outputField: '',
          secretKeyField: '',
          readKeyAsBinary: 'N',
          inputAsHex: 'Y', // 16进制格式
          outputAsHex: 'Y' // 16进制格式
        },
        fieldOptions: []
      }
    },
    mounted () {

    },
    methods: {
      loadData (data) {
        if (data) {
          this.$forceUpdate()
          // this.$deepCopy(this.pluginData, data)
          this.pluginData = Object.assign({}, data)
          this.pluginData.outputAsHex = 'Y'
          this.temp = JSON.parse(JSON.stringify(data))
        }
      },
      // 保存表单数据
      handleSaveData () {
        if (this.pluginData.name) {
          this.$emit('savePluginData', this.pluginData)
        } else {
          this.$message({
            message: '步骤名称必填',
            type: 'warning'
          })
        }
      },
      setGraph (val) {
        this.graph = val
        this.getStreamField()
      },
      cancel () {
        this.$emit('cancel')
      },
      // 重置表单数据
      resetFormData (stepname) {
        this.$forceUpdate()
        this.$refs['sm4'].resetFields()
        this.$deepCopy(this.pluginData, this.temp)
        // this.pluginData = JSON.parse(JSON.stringify(this.temp))
        this.pluginData['name'] = stepname
      },
      async getStreamField () {
        const value = await this.getXml()
        await API.trans.inputFields(value, {'stepName': this.pluginData.name}).then(res => {
          this.$set(this, 'fieldOptions', res.data)
        })
      },
      getXml () {
        this.saveTempPluginData(this.pluginData)
        const graph = this.graph
        const enc = new mxCodec(mxUtils.createXmlDocument())
        const node = enc.encode(graph.getModel())
        const value = mxUtils.getPrettyXml(node)
        return value
      },
      saveTempPluginData (formData) {
        this.$emit('saveTempPluginData', formData)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

.el-table-add-row {
  border: 1px dashed #c1c1cd;
  margin-left: 20px;
  border-radius: 3px;
  cursor: pointer;
  justify-content: center;
  display: flex;
  width: 200px;
  line-height: 34px;
}
.box{
  position:relative;
  border:1px solid #dcdfe6;
  padding:30px 5px 10px 5px;
}
.box::before{
  content:attr(title);
  position:absolute;
  top: 0%;
  left:10%;
  transform:translateX(-50%);
  -webkit-transform:translate(-50%,-50%);
  padding:0px 10px;
  background-color:#fff;
}
</style>
